<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
const { type, illnessType } = defineProps<{
  type: string
  illnessType:string
}>()


import { departmentListApi } from '@/apis/consult';
import type { DepartData } from '@/types/consult';
import { computed, ref } from 'vue';

// 1. 科室列表
const departmentList = ref<DepartData[]>([])
// 科室列表
async function getDepartmentList() {
  // 科室列表接口
  const data = await departmentListApi()
  // 渲染列表数据
  departmentList.value = data
}

// 获取科室列表
getDepartmentList()

const active = ref(0)
const onChange = (index: number) => {
  active.value = index
}

  // 3. 二级科室的数据
  // 注意一定要加?
  const childList = computed(() => {
    return departmentList.value[active.value]?.child
  })
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view class="department-item" v-for="(item, index) in departmentList" :key="item.id" @click="onChange(index)"
      :class="{ active: active === index }">{{ item.name }}</view>
    </scroll-view>
    <scroll-view class="department-secondary" >
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${item.id}`"
        class="department-item"
        v-for="(item, index) in childList" :key="item.id"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>